<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">

    <meta name="description" content="">
    <title>甘特图</title>

    <style></style>
    <script src="https://github.highcharts.com/gantt/highcharts-gantt.src.js"></script>

</head>

<body>
    <!--
 *************************************************************************
     Generated by JShare at 2021-09-28 22:01:14
     From: https://jshare.com.cn/hcharts.cn/tp40io
 *************************************************************************
 -->
    <div id="container"></div>
    <script>
        var today = new Date()
        var day = 1000 * 60 * 60
        // Set to 00:00:00:000 today
        today.setUTCHours(0);
        today.setUTCMinutes(0);
        today.setUTCSeconds(0);
        today.setUTCMilliseconds(0);
        today = today.getTime();
        // THE CHART
        Highcharts.ganttChart('container', {
            title: {
                text: '甘特图测试例子'
            },
            xAxis: {
                currentDateIndicator: true,
                min: today - 3 * day,
                max: today + 18 * day
            },
            plotOptions: {
                gantt: {
                    pathfinder: {
                        type: 'simpleConnect'
                    }
                }
            },
            series: [
                {
                    // name: '新办公室',
                    data: [
                        {
                            name: '贝位 01  任务量 120',
                            label: '新办公室',
                            taskName: '更换新的办公地点',
                            id: 'new_offices',
                            start: today - 2 * day,
                            end: today + 14 * day,
                            color: '#9ED1A6'
                        },
                        {
                            name: '贝位 02  任务量 140',
                            taskName: '选址及装修',
                            id: 'prepare_building',
                            start: today - (-3 * day),
                            end: today + (8 * day),
                            color: '#F3D95E'
                        },
                        {
                            name: '贝位 03  任务量 140',
                            taskName: '选址及装修',
                            id: 'aaaa',
                            start: today - (0 * day),
                            end: today + (4 * day),
                            color: '#DB4D16'
                        },
                        {
                            name: '贝位 04  任务量 140',
                            taskName: '选址及装修',
                            id: 'bbbb',
                            start: today - (-1 * day),
                            end: today + (6 * day),
                            color: '#689BC6'
                        },
                        {
                            name: '贝位 05  任务量 140',
                            taskName: '选址及装修',
                            id: 'cccc',
                            start: today - (2 * day),
                            end: today + (5 * day),
                            color: '#34B1E1'
                        },
                        {
                            name: '贝位 06  任务量 140',
                            taskName: '选址及装修',
                            id: 'prepare_building',
                            start: today - (1 * day),
                            end: today + (1 * day),
                            color: '#623592'
                        },
                    ]
                },
            ]
        });
    </script>
</body>

</html>